<template>
  <div class="box-head">
    <div class="head-dhl">
      <van-icon
        name="arrow-left"
        class="jianTou"
        size="30"
        @click="$router.push('/home')"
      />
      <p>排行榜</p>
      <span>冲榜有奖</span>
    </div>
    <van-tabs
      v-model="active"
      background="transparent"
      color="#bbbbbb"
      title-active-color="#d0d0d0"
      title-inactive-color="#a3a2a0"
      line-width="20px"
    >
      <van-tab title="真爱" to="/home/phb/za"></van-tab>
      <van-tab title="贡献" disabled></van-tab>
      <van-tab title="魅力" to="/home/phb/ml"></van-tab>
      <van-tab title="礼物" disabled></van-tab>
      <van-tab title="守护" disabled></van-tab>
      <van-tab title="贵族" disabled></van-tab>
      <van-tab title="伴侣" to="/home/phb/bl"></van-tab>
    </van-tabs>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 2,
    };
  },
  created() {
    let num = this.$route.path.replace("/home/phb/", "");
    if (num == "ml") {
      this.active = 2;
    } else if (num == "za") {
      this.active = 0;
    } else if (num == "bl") {
      this.active = 6;
    }
  },
};
</script>

<style lang='scss' >
.box-head {
  margin-top: 57px;
  .van-tab__text {
    font-size: 32px;
  }
  //tab栏
  .head-dhl {
    color: white;
    width: 95%;
    height: 56px;
    line-height: 56px;
    margin: 0 auto 52px;
    display: flex;
    justify-content: space-between;
    .jianTou {
      display: block;
      width: 48px;
      height: 56px;
      line-height: 56px;
      text-align: center;
    }
    p {
      transform: translateX(27px);
      text-align: center;
      font-size: 30px;
    }
    span {
      display: block;
      width: 112px;
      text-align: center;
      line-height: 60px;
      font-size: 24px;
    }
  }
}
</style>